<template>
	<view class="my-page" :style="[{ height:screenHeight + 'px' }]">
		<view class="container">
			<view class="head-box" id="head">
				<!-- 导航栏 -->
				<!-- #ifndef MP-WEIXIN -->
				<free-nav-bar textContent="我的"></free-nav-bar>
				<!-- #endif -->
				<view class="head flex">
					<view class="avatar" >
						<button open-type="chooseAvatar" @chooseavatar="chooseAvatarHandle">
							<image v-if="userInfo.avatar" class="img" :src="userInfo.avatar"></image>
							<image v-else class="img" src="http://oss.town168.com/oss/web/images/avatar.png"></image>	
						</button>
					</view>
					<view class="head-info">
						<view class="head-top flex">
							<view v-if="userInfo.nickname" class="name main-text-color">{{userInfo.nickname}}</view>
							<view v-else class="name main-text-color"> 
								<span v-if="userInfo.mobile">{{userInfo.mobile}}</span> 
								<span v-else>生鲜客栈</span>
							</view>
							<view class="edit" @click="editInfo">
								<span class="span-svg">
									<img class="svg-img" src="@/static/images/edit.svg" alt="">
								</span>
							</view>
						</view>
						<view class="ids main-text-color" v-if="userInfo.point != null">积分：{{userInfo.point}}</view>
					</view>
				</view>
			</view>
			<view class="body-box">
				<view class="order-wrap flex">
					<view class="order-list order-list-top" v-for="(item, index) in orderList" :key="index" @click="goToOrderList(item)">
						
						<view :class="['icon svg-' + item.icon ]">
							<img class="svg-img" v-if="item.icon == 'wallet'" src="@/static/images/svg-wallet.svg" alt="">
							<img class="svg-img" v-if="item.icon == 'wagon'" src="@/static/images/svg-wagon.svg" alt="">
							<img class="svg-img" v-if="item.icon == 'returns'" src="@/static/images/svg-returns.svg" alt="">
							<img class="svg-img" v-if="item.icon == 'order'" src="@/static/images/svg-order.svg" alt="">
							<img class="svg-img" v-if="item.icon == 'received_goods'" src="@/static/images/svg-received_goods.svg" alt="">
							<uni-badge class="uni-badge-right-margin" :text="item.num" absolute="rightTop" size="small">
							</uni-badge>
						</view>
						<view class="text"><text>{{item.label}}</text></view>
					</view>
				</view>
				<view class="order-wrap flex">
					<view class="order-list" v-for="(item, index) in settingList" :key="index" @click="goToHandle(item)">
						<view :class="['icon svg-' + item.icon ]">
							<img class="svg-img" v-if="item.icon == 'address'" src="@/static/images/svg-address.svg" alt="">
							<img class="svg-img" v-if="item.icon == 'save'" src="@/static/images/svg-save.svg" alt="">
						</view>
						<view class="text"><text>{{item.label}}</text></view>
					</view>
					<view class="order-list">
						<button class="leftBox" type="default" plain="true" style="border: none;" open-type="contact" @contact="contact">
							<view class="icon">
								<img class="svg-img" src="@/static/images/svg-service.svg" alt="">
							</view>
						    <view class="text"><text>联系客服</text></view>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				scrollTop: 0,
				screenHeight: 617,
				old: {
					scrollTop: 0
				},
				userInfo: {},
				orderList: [
					{
						icon: 'wallet',
						label: '待付款',
						num: 0,
						status: 0,
					},
					{
						icon: 'wagon',
						label: '待收货',
						num: 0,
						status: 1,
					},
					{
						icon: 'received_goods',
						label: '已收货',
						num: 0,
						status: 2,
					},
					{
						icon: 'returns',
						label: '售后',
						num: 0,
						status: -1,
					},
					{
						icon: 'order',
						label: '全部订单'
					}
				],
				settingList: [
					{
						icon: 'address',
						label: '收货地址',
						url: '/pages/my/address-list/address-list'
					},
					{
						icon: 'save',
						label: '收藏',
						url: '/pages/my/collect-list'
					}
					// {
					// 	icon: 'task',
					// 	label: '带货任务'
					// },
					// {
					// 	icon: 'income',
					// 	label: '带货收益'
					// },
					// {
					// 	icon: 'service',
					// 	label: '联系客服'
					// }
				]
			}
		},
		onShow() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight//获取当前页面的高度
			this.getUserInfo();
			this.$store.commit('loadUserData');
			console.log('个人中心');
		},
		onReady() {
			var height
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					_this.$nextTick(() => {
						let view = uni.createSelectorQuery().select("#head"); //局部滑块
						view.boundingClientRect(data => {
							_this.topHeight = data.height;
							height = _this.phoneHeight - _this.topHeight - 10 - 180;	
							_this.scrollerHeight = height;
						}).exec();
					})
				},
			}); 
			
		},
		computed: {
			pageHeight() {
				return 'height:' + this.screenHeight +'px';
			},
			tabIcon(icon) {
				return `icon sprite- sprite-${icon}`;
			}
		},
		methods: {
			getUserInfo() {
				let _this = this;
				$H.get('/member/user/get').then(res => {
					if(res) {
						_this.userInfo = res;
					}
				})
			},
			chooseAvatarHandle(res) {
				// console.log(res)
				if(res && res.detail && res.detail.avatarUrl) {
					let avatarUrl = res.detail.avatarUrl
					if(avatarUrl.includes('wxfile://')) {
						uni.showToast({
							title: '获取微信头像失败，可在个人编辑处进行头像修改',
							icon: 'none'
						});
						return;
					}
					uni.showLoading({
						title: '',
						mask: true
					});
				  
				  let _this = this;
				  $H.put('/member/user/update',{avatar: avatarUrl}).then(res => {
					  _this.getUserInfo();
				  	 uni.hideLoading();					 
				  }).catch(() => {
					  uni.hideLoading();
				  })
				}				
			},
			getWxUserInfo() {
				
			},
			goToHandle(e) {
				if(e && e.url) {
					uni.navigateTo({url: e.url});
				}
			},
			goToOrderList(e) {
				if(e) {
					if(e.status == -1) {
						uni.navigateTo({url: '/pages/my/after-sale-list'});
					}
					else {
						uni.navigateTo({url: '/pages/my/order-list?status=' + e.status});
					}
				}
			},
			editInfo() {
				uni.navigateTo({url: '/pages/my/edit-userinfo'});
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			chooseHandle(item) {
				console.log(item, 666)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-page {
		background: #F4F4F4;
		/deep/ .other-head-mod {
			background-color: transparent !important;
			border-bottom: none;
		}
		.container {
			.head-box {
				height: 184px;
				border-radius: 0 0 20px 20px;
				background: url('http://oss.town168.com/oss/web/icon/my_bg.png') no-repeat;
				background-size: cover;
			}
			.body-box {
				position: relative;
				top: -40px;
				padding: 0 20rpx;
			}
			.head {
				height: 207rpx;
				padding: 20rpx;
				padding-left: 20px;
				align-items: center;
				
				.avatar {
					width: 126rpx;
					height: 126rpx;
					border-radius: 200px;
					overflow: hidden;
					background-color: #e8e5e5;
					button {
						width: 126rpx;
						height: 126rpx;
						border-radius: 200px;
						padding: 0;
					}					
					button::after {						
						border: none;
					}
					.img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				
				.head-info {
					margin-left: 30rpx;
					
					.head-top {
						height: 48rpx;
						align-items: center;
						
						.name {
							font-size: 34rpx;
							line-height: 48rpx;
						}
						.edit {
							margin-left: 30rpx;
							cursor: pointer;
							width: 15px;
							height: 15px;
							
							.span-svg {
								width: 15px;
								height: 15px;
								.svg-img {
									display: block;
									width: 100%;
									height: 100%;
								}
							}
						}
					}
					.ids {
						font-size: 28rpx;
						line-height: 40rpx;
					}
					.post {
						font-size: 24rpx;
						line-height: 33rpx;
						color: #999;
						align-items: center;
						
						.icon {
							margin-right: 8rpx;
						}
					}
				}
			}
			.order-wrap {
				height: 160rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				align-items: center;
				
				.order-list {
					flex: 1;
					
					.icon {
						width: 30px;
						height: 30px;
						margin: 0 auto;
						
						.svg-img {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
					
					&.order-list-top {
						.icon {
							width: 23px;
							height: 23px;
						}
					}
					.text {
						color: #999;
						font-size: 26rpx;
						line-height: 37rpx;
						margin-top: 20rpx;
						text-align: center;
					}
				}
			}
			.recommendation-wrap {
				background-color: #fff;
				
				.recommendation-title {
					height: 80rpx;
					justify-content: center;
					align-items: center;
					
					.left {
						margin-right: 13px;
					}
					.right {
						display: inline-block;
						margin-left: 13px;
					}
				}
				.recommendation-list {
					.item {
						padding: 13px 10px;
						border-top: 1px solid #F4F4F4;
					}
					.item-title {
						justify-content: space-between;
						
						.share {
							display: flex;
							align-items: center;
							border: 1px solid #F8741E;
							height: 25px;
							border-radius: 200PX;
							padding: 0 10px;
							
							i {
								display: inline-block;
							}
							.share-text {
								font-size: 12px;
								color: #F8741E;
								margin-left: 6px;
							}
						}
					}
					.item-title h2 {
						font-size: 14px;
						color: #222222;
						line-height: 20px;
					}
					.item-info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 10px 0;
						
						.specs {
							font-size: 12px;
							color: #999;
						}
						.price {
							font-size: 14px;
							color: #FD5052;
							font-weight: bold;
							
							.symbol {
								font-size: 12px;
								font-weight: normal;
							}
						}
					}
					.images-list {
						.item-img {
							width: 33.3333%;
							flex: 1;
							height: 86px;
							border-radius: 4px;
							overflow: hidden;
							background: pink;
							margin-right: 10px;
							
							&:nth-child(3n) {
								margin-right: 0;
							}
						}
					}
					.operate-warpper {
						margin-top: 13px;
						padding-left: 15px;
						.sprite {
							display: block;
							margin-right: 8px;
						}
						.operate-item {
							font-size: 12px;
							align-items: center;
							margin-right: 45px;
							
							&:last-child {
								margin-right: 0;
							}
						}
					}
				}
			}
		}
	}
</style>
